<script setup>
// 动态数据示例
import ProblemDetailLeft from "@/components/ProblemDetailLeft.vue";

const problem = {
  title: "解析结果",
  question: "用简便方法计算：10 1/7 × 9 6/7",
  explanation: "已知条件：\n" +
      "\n" +
      "总面粉重量：500吨。\n" +
      "每辆大卡车运输：9.6吨。\n" +
      "大卡车总数：40辆。\n" +
      "每辆小卡车运输：4吨。\n" +
      "问题要求：\n" +
      "\n" +
      "计算剩下需要用小卡车运输的重量。\n" +
      "计算需要多少辆小卡车。",
  answer: {
    value: "29辆",
    steps: [
      "1.计算大卡车总运输量:",
        "40×9.6=384吨",
        "2.计算剩余重量：",
        "500−384=116吨",
        "计算小卡车数量： 每辆小卡车运输4吨，需要的小卡车数量为：",
        "116/4=29辆",
        "（取向上取整，因为车辆数量不能为小数。）",
    ],
    image: "../assets/img.png", // 替换为实际图片地址
  },
  comment: "本题主要考查了基础运算与实际应用的结合能力。通过已知条件，运用乘法计算大卡车的总运输量，减法求出剩余面粉的重量，最后用除法计算出小卡车的需求数量，同时结合向上取整处理，确保车辆数量为整数。",
  knowledgePoints: ["乘法计算，实际应用"],
  recommendation: {
    microLesson: {
      teacher: "优秀教师：高远",
      duration: "13:15",
    },
    practice: {
      difficulty: "★★★",
      questions: 5,
    },
  },
};
</script>

<template>
  <div class="analysis-result">
    <!-- 标题部分 -->
    <header class="header">
      <h1>{{ problem.title }}</h1>
    </header>
    <ProblemDetailLeft/>
    <!-- 题目部分 -->
<!--    <section class="question-section">-->
<!--      <h2>题目</h2>-->
<!--      <p>{{ problem.question }}</p>-->
<!--    </section>-->

    <!-- 解析部分 -->
    <section class="explanation-section">
      <h2>解析</h2>
      <p>{{ problem.explanation }}</p>
    </section>

    <!-- 解答部分 -->
    <section class="answer-section">
      <h2>解答</h2>
      <p>
        答案：<span class="highlight">{{ problem.answer.value }}</span>
      </p>
      <div class="steps">
        <p v-for="(step, index) in problem.answer.steps" :key="index">
          {{ step }}
        </p>
      </div>
      <!-- 图片显示 -->

    </section>

    <!-- 点评部分 -->
    <section class="comment-section">
      <h2>点评</h2>
      <p>{{ problem.comment }}</p>
    </section>

    <!-- 知识点部分 -->
    <section class="knowledge-section">
      <h2>知识点</h2>
      <ul>
        <li v-for="(point, index) in problem.knowledgePoints" :key="index">
          {{ point }}
        </li>
      </ul>
    </section>

    <!-- 学习推荐部分 -->
    <section class="recommendation-section">
      <h2>学习推荐</h2>
      <div class="recommendation">
        <div class="micro-lesson">
          <h3>微课</h3>
          <p>{{ problem.recommendation.microLesson.teacher }}</p>
          <p>讲解时长：{{ problem.recommendation.microLesson.duration }}</p>
        </div>
        <div class="practice">
          <h3>掌握程度</h3>
          <p>难度：{{ problem.recommendation.practice.difficulty }}</p>
          <p>练习次数：{{ problem.recommendation.practice.questions }}</p>
        </div>
      </div>
    </section>

  </div>
</template>

<style scoped>
/* 页面整体样式 */
.analysis-result {
  font-family: Arial, sans-serif;
  padding: 20px;
  line-height: 1.6;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.header h1 {
  font-size: 26px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

/* 各部分标题 */
section h2 {
  font-size: 20px;
  color: #444;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 4px solid #42b983;
  padding-left: 10px;
}

/* 题目部分 */
.question-section p {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 解析部分 */
.explanation-section p {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  border-left: 4px solid #ffa726;
}

/* 解答部分 */
.answer-section {
  margin-bottom: 20px;
}

.answer-section .highlight {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

.answer-section .steps p {
  font-size: 15px;
  color: #333;
  margin: 10px 0;
}

/* 图片样式 */
.answer-image {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 20px;
}

.answer-image img {
  max-width: 80%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 点评部分 */
.comment-section p {
  font-size: 15px;
  color: #666;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 知识点部分 */
.knowledge-section ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}

.knowledge-section li {
  font-size: 15px;
  color: #333;
  margin-bottom: 8px;
}

/* 学习推荐部分 */
.recommendation-section {
  margin-bottom: 20px;
}

.recommendation-section .recommendation {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
  padding: 10px;
  background-color: #f1f8e9;
  border-radius: 5px;
  border: 1px solid #c5e1a5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.recommendation h3 {
  font-size: 16px;
  color: #555;
  margin-bottom: 5px;
}

.recommendation p {
  font-size: 14px;
  color: #666;
}

/* 底部按钮 */
.footer .add-to-wrong-book {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-top: 30px;
  text-align: center;
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.footer .add-to-wrong-book:hover {
  background-color: #38a473;
}
</style>
